<template>
  <div class="app">
    <div>
        <input 
        @keyup.enter="saveTag"  
        v-show="isShowInput" 
        type="text" 
        :value="updateTag" 
        @blur="isShowInput = false" 
        ref="tagInput"
        placeholder="请输入标签"
        >
    </div>
    <div>
        <span v-show="!isShowInput" @dblclick="showInput">{{ updateTag }}</span>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        updateTag: {
            type: String,
            default: '999'
        },
        id: Number
    },
    data() {
        return {
            isShowInput: false
        }
    },
    methods: {
        showInput() {
            this.isShowInput = true
            // 变更DOM后，获取焦点，通常可以使用 $nextTick 或者 自定义指令在创建好DOM后的阶段获得焦点
            this.$nextTick(() => this.$refs.tagInput.focus())
        },
        saveTag(e) {
            this.isShowInput = false
            this.$emit('updateTag', {id: this.id, tag: e.target.value})
        }
    }
}
</script>

<style scoped>
.app {
    font-size: 16px;
}

input{
    outline: none;
    border: 1px solid gray;
    vertical-align: middle;
    font-size: 16px;
}
input, span{
    width: 40px
}
</style>